<!-- PAGE CONTENT WRAPPER -->
<div class="page-content-wrap">
    <!-- START WIDGETS -->
    <div class="row">
        <!--<div class="col-md-3">-->
        <!--&lt;!&ndash; START WIDGET SLIDER 全部用户数，回流用户数，新用户数（近一个月） &ndash;&gt;-->
        <!--<div class="widget widget-default widget-carousel">-->
        <!--<div class="owl-carousel" id="owl-example">-->
        <!--<div>-->
        <!--<div class="widget-title">{{'全部用户数' | dyLanguage}}</div>-->
        <!--<div class="widget-subtitle"></div>-->
        <!--<div class="widget-int">{{dashboard.userTotal}}</div>-->
        <!--</div>-->
        <!--<div>-->
        <!--<div class="widget-title">{{'回流用户数' | dyLanguage}}</div>-->
        <!--<div class="widget-subtitle">{{'本月' | dyLanguage}}</div>-->
        <!--<div class="widget-int">{{dashboard.returnUserTotal}}</div>-->
        <!--</div>-->
        <!--<div>-->
        <!--<div class="widget-title">{{'新用户数' | dyLanguage}}</div>-->
        <!--<div class="widget-subtitle">{{'本月' | dyLanguage}}</div>-->
        <!--<div class="widget-int">{{dashboard.newUserTotal}}</div>-->
        <!--</div>-->
        <!--</div>-->
        <!--<div class="widget-controls">-->
        <!--<a href="javascript:void(0)" class="widget-control-right widget-remove" data-toggle="tooltip" data-placement="top" title="Remove Widget"><span class="fa fa-times"></span></a>-->
        <!--</div>-->
        <!--</div>-->
        <!--&lt;!&ndash; END WIDGET SLIDER &ndash;&gt;-->
        <!--</div>-->

        <!-- 地图完成数，点进去可以看到地图列表，且可以导出完成该地图的员工列表 -------------------------------------------------------------------------------------------- -->
        <div class="col-md-3">
            <div class="widget widget-info widget-padding-sm">
                <div class="widget-item-left">
                    <div class="chart-holder" id="dashboard-newUserTotal-returnUserTotal" style="height: 100px;"></div>
                </div>
                <div class="widget-data">
                    <div class="widget-big-int" style="font-weight: bold; font-size: 30px;"><span class="num-count">{{dashboard.monthUserTotal}}</span></div>
                    <div class="widget-title" style="color: #262A2E;">{{'本月用户数' | dyLanguage}}</div>
                    <div class="widget-subtitle" style="color: #262A2E;">{{'历史用户总数' | dyLanguage}}{{dashboard.userTotal}}</div>
                </div>
                <div class="widget-controls">
                    <a href="javascript:void(0)" class="widget-control-right"><span class="fa fa-times"></span></a>
                </div>
            </div>
        </div>


        <div class="col-md-3">
            <!-- START WIDGET SLIDER 总课程数，总地图数，总徽章数 -->
            <div class="widget widget-default widget-carousel">
                <div class="owl-carousel" id="owl-example">
                    <div>
                        <div class="widget-title">{{'总课程数' | dyLanguage}}</div>
                        <div class="widget-subtitle"></div>
                        <div class="widget-int">{{dashboard.exerciseTotal}}</div>
                    </div>
                    <div>
                        <div class="widget-title">{{'总地图数' | dyLanguage}}</div>
                        <div class="widget-subtitle"></div>
                        <div class="widget-int">{{dashboard.mapTotal}}</div>
                    </div>
                    <div>
                        <div class="widget-title">{{'总徽章数' | dyLanguage}}</div>
                        <div class="widget-subtitle"></div>
                        <div class="widget-int">{{dashboard.badgeTotal}}</div>
                    </div>
                </div>
                <div class="widget-controls">
                    <a href="javascript:void(0)" class="widget-control-right widget-remove" data-toggle="tooltip" data-placement="top" title="Remove Widget"><span class="fa fa-times"></span></a>
                </div>
            </div>
            <!-- END WIDGET SLIDER -->
        </div>

        <!-- 获得徽章数，点进去可以看到所有徽章，每个徽章点进去可以看到获得该徽章的员工列表（名单可导出） -------------------------------------------------------------------------------------------- -->

        <div class="col-md-3">

            <!-- START WIDGET MESSAGES 获得徽章数，点进去可以看到所有徽章，每个徽章点进去可以看到获得该徽章的员工列表（名单可导出） -->
            <div class="widget widget-default widget-item-icon">
                <div class="widget-item-left">
                    <img width="50px" src="skin/default/img/badge.png">
                </div>
                <div class="widget-data">
                    <div class="widget-int num-count">{{dashboard.userBadgeTotal}}</div>
                    <div class="widget-title">{{'获得徽章数' | dyLanguage}}</div>
                    <div class="widget-subtitle"><a style="color: #66CCFF;" href="javascript:void(0)" ui-sref="sz.dashboardUserBadgeInfo">{{'点击进入查看详细' | dyLanguage}}</a></div>
                </div>
                <div class="widget-controls">
                    <a href="javascript:void(0)" class="widget-control-right widget-remove" data-toggle="tooltip" data-placement="top" title="Remove Widget"><span class="fa fa-times"></span></a>
                </div>
            </div>
            <!-- END WIDGET MESSAGES -->

        </div>
        <!-- 获得徽章数，点进去可以看到所有徽章，每个徽章点进去可以看到获得该徽章的员工列表（名单可导出） -------------------------------------------------------------------------------------------- -->

        <!-- 地图完成数，点进去可以看到地图列表，且可以导出完成该地图的员工列表 -------------------------------------------------------------------------------------------- -->
        <div class="col-md-3">

            <!-- START WIDGET REGISTRED 地图完成数，点进去可以看到地图列表，且可以导出完成该地图的员工列表 -->
            <div class="widget widget-default widget-item-icon">
                <div class="widget-item-left">
                    <span class="fa fa-check-square"></span>
                </div>
                <div class="widget-data">
                    <div class="widget-int num-count">{{dashboard.mapFinishTotal}}</div>
                    <div class="widget-title">{{'地图完成数' | dyLanguage}}</div>
                    <div class="widget-subtitle"><a style="color: #66CCFF;" href="javascript:void(0)" ng-click="openLearningMapInfo()">{{'点击进入查看详细' | dyLanguage}}</a></div>
                </div>
                <div class="widget-controls">
                    <a href="javascript:void(0)" class="widget-control-right widget-remove" data-toggle="tooltip" data-placement="top" title="Remove Widget"><span class="fa fa-times"></span></a>
                </div>
            </div>
            <!-- END WIDGET REGISTRED -->

        </div>


    </div>
    <!-- END WIDGETS -->

    <div class="row">

        <div class="col-md-6">

            <!-- START DISCRETE CHART -->
            <div class="panel panel-default">
                <div class="panel-heading">
                    <div class="panel-title-box">
                        <h3>
                            {{'学习人数与使用率趋势' | dyLanguage}}
                            (
                            <select ng-model="selectedUserTotalPvSpaceTypes" ng-change="changeUserTotalPvSpaceTypes()">
                                <option ng-repeat="x in reportSpaceTypes" value="{{x.key}}">{{x.value | dyLanguage}}</option>
                            </select>
                            )
                        </h3>
                        <span>{{'总学习人数与使用率变化的天、周、月趋势图' | dyLanguage}}</span>
                    </div>
                    <ul class="panel-controls panel-controls-title">
                        <li>
                            <div id="report-range-userTotal-pvTotal" class="dtrange">
                                <span></span><b class="caret"></b>
                            </div>
                        </li>
                        <li><a href="javascript:void(0)" class="panel-fullscreen rounded"><span class="fa fa-expand"></span></a></li>
                    </ul>
                </div>
                <div class="panel-body">
                    <div id="chart-userTotal-pvTotal" style="height: 170px;">
                        <div id="chart-userTotal-pvTotal-div">
                            <svg></svg>
                        </div>
                    </div>
                </div>
            </div>
            <!-- END DISCRETE CHART -->
        </div>


        <!-- 总学习次数与时长变化天周月趋势 -------------------------------------------------------------------------------------------- -->
        <div class="col-md-6">
            <!-- START SALES & EVENTS BLOCK -->
            <div class="panel panel-default">
                <div class="panel-heading">
                    <div class="panel-title-box">
                        <h3>
                            {{'学习次数与时长趋势' | dyLanguage}}
                            <!--(<select ng-change="dashboard_pv_report_qs()">-->
                            <!--<option value="1">日趋势</option>-->
                            <!--<option value="1">周趋势</option>-->
                            <!--<option value="1">月趋势</option>-->
                            <!--</select>-->
                            (
                            <select ng-model="selectedPvReportSpaceTypes" ng-change="changePvReportSpaceTypes()">
                                <option ng-repeat="x in reportSpaceTypes" value="{{x.key}}">{{x.value | dyLanguage}}</option>
                            </select>
                            )
                        </h3>
                        <span>{{'总学习次数与时长变化的天、周、月趋势图' | dyLanguage}}</span>
                    </div>
                    <ul class="panel-controls panel-controls-title">
                        <li>
                            <div id="report-range-pv" class="dtrange">
                                <span></span><b class="caret"></b>
                            </div>
                        </li>
                        <li><a href="javascript:void(0)" class="panel-fullscreen rounded"><span class="fa fa-expand"></span></a></li>
                    </ul>
                </div>
                <div class="panel-body padding-0" id="dashboard-pv-report-div">
                    <div class="chart-holder" id="dashboard-pv-report" style="height: 200px;"></div>
                </div>
            </div>
            <!-- END SALES & EVENTS BLOCK -->
        </div>
        <!-- 总学习次数与时长变化天周月趋势 -------------------------------------------------------------------------------------------- -->


    </div>

    <div class="row">

        <!-- 徽章获得排行榜 -------------------------------------------------------------------------------------------- -->
        <div class="col-md-6">

            <!-- START PROJECTS BLOCK -->
            <div class="panel panel-default">
                <div class="panel-heading">
                    <div class="panel-title-box">
                        <h3>{{'徽章获得排行榜' | dyLanguage}}</h3>
                        <span>{{'徽章获得排行榜' | dyLanguage}}</span>
                    </div>
                    <ul class="panel-controls" style="margin-top: 2px;">
                        <li><a href="javascript:void(0)" class="panel-fullscreen"><span class="fa fa-expand"></span></a></li>
                        <li><a href="javascript:void(0)" class="panel-refresh"><span class="fa fa-refresh"></span></a></li>
                        <li class="dropdown">
                            <a href="javascript:void(0)" class="dropdown-toggle" data-toggle="dropdown"><span class="fa fa-cog"></span></a>
                            <ul class="dropdown-menu">
                                <li><a href="javascript:void(0)" class="panel-collapse"><span class="fa fa-angle-down"></span> Collapse</a></li>
                                <li><a href="javascript:void(0)" class="panel-remove"><span class="fa fa-times"></span> Remove</a></li>
                            </ul>
                        </li>
                    </ul>
                </div>
                <div class="panel-body panel-body-table">

                    <div class="table-responsive">
                        <table class="table table-bordered table-striped">
                            <thead>
                            <tr>
                                <th>{{'昵称' | dyLanguage}}</th>
                                <th ng-show="user.roleCode == 'ROLE_ORGANIZATION_SERVICE'">{{'所在企业' | dyLanguage}}</th>
                                <th>{{'徽章数' | dyLanguage}}</th>
                                <th>{{'徽章' | dyLanguage}}</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr ng-repeat="record in dashboard.userBadgeInfos">
                                <td><strong>{{record.nickName}}</strong></td>
                                <td ng-show="user.roleCode == 'ROLE_ORGANIZATION_SERVICE'"><strong>{{record.companyName}}</strong></td>
                                <td><strong>{{record.badges.length}}</strong></td>
                                <td>
                                    <div ng-repeat="badge in record.badges | limitTo: 6" style="float: left; padding-right: 5px;">
                                        <img title="{{badge.name}}" ng-src="{{badge.picture | faceUrl}}" width="20px">
                                    </div>

                                    <!--<ul>-->
                                    <!--<li style="float: left; padding-left: 5px; list-style-type: none; margin-left: -40px;" ng-repeat="badge in record.badges | limitTo: 6">-->
                                    <!--<img title="{{badge.name}}" ng-src="{{badge.picture | faceUrl}}" width="20px">-->
                                    <!--</li>-->
                                    <!--</ul>-->
                                </td>
                            </tr>
                            </tbody>
                        </table>
                    </div>

                </div>
            </div>
            <!-- END PROJECTS BLOCK -->

        </div>
        <!-- 徽章获得排行榜 -------------------------------------------------------------------------------------------- -->

        <!-- 最新内容 -------------------------------------------------------------------------------------------- -->
        <div class="col-md-6">

            <!-- START PROJECTS BLOCK -->
            <div class="panel panel-default">
                <div class="panel-heading">
                    <div class="panel-title-box">
                        <h3>{{'最新内容' | dyLanguage}}</h3>
                        <span>{{'最新内容' | dyLanguage}}</span>
                    </div>
                    <ul class="panel-controls" style="margin-top: 2px;">
                        <li><a href="javascript:void(0)" class="panel-fullscreen"><span class="fa fa-expand"></span></a></li>
                        <li><a href="javascript:void(0)" class="panel-refresh"><span class="fa fa-refresh"></span></a></li>
                        <li class="dropdown">
                            <a href="javascript:void(0)" class="dropdown-toggle" data-toggle="dropdown"><span class="fa fa-cog"></span></a>
                            <ul class="dropdown-menu">
                                <li><a href="javascript:void(0)" class="panel-collapse"><span class="fa fa-angle-down"></span> Collapse</a></li>
                                <li><a href="javascript:void(0)" class="panel-remove"><span class="fa fa-times"></span> Remove</a></li>
                            </ul>
                        </li>
                    </ul>
                </div>
                <div class="panel-body panel-body-table">

                    <div class="table-responsive">
                        <table class="table table-bordered table-striped">
                            <thead>
                            <tr>
                                <th>{{'内容' | dyLanguage}}</th>
                                <th>{{'创建时间' | dyLanguage}}</th>
                                <th>{{'总点击次数' | dyLanguage}}</th>
                                <th>{{'总完成次数' | dyLanguage}}</th>
                                <th>{{'总完成人数' | dyLanguage}}</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr ng-repeat="record in dashboard.newExerciseInfos">
                                <th title="{{record.learningMapName}}-{{record.learningMapCourseName}}-{{record.learningMapExerciseName}}"><strong>{{record.learningMapExerciseName | cmCut:false:10:' ...'}}</strong></th>
                                <td><strong>{{record.createTime.toDate()}}</strong></td>
                                <td><strong>{{record.pvTotal}}</strong></td>
                                <td><strong>{{record.pvFinishTotal}}</strong></td>
                                <td><strong>{{record.finishTotal}}</strong></td>
                            </tr>
                            </tbody>
                        </table>
                    </div>

                </div>
            </div>
            <!-- END PROJECTS BLOCK -->

        </div>
        <!-- 最新内容 -------------------------------------------------------------------------------------------- -->
    </div>
    <div class="row">


        <!-- （本月）最受欢迎的内容排行 -------------------------------------------------------------------------------------------- -->
        <div class="col-md-12">

            <!-- START PROJECTS BLOCK -->
            <div class="panel panel-default">
                <div class="panel-heading">
                    <div class="panel-title-box">
                        <h3>{{'内容排行' | dyLanguage}}</h3>
                        <span>{{'（本月）最受欢迎的内容排行' | dyLanguage}}</span>
                    </div>
                    <ul class="panel-controls" style="margin-top: 2px;">
                        <li><a href="javascript:void(0)" class="panel-fullscreen"><span class="fa fa-expand"></span></a></li>
                        <li><a href="javascript:void(0)" class="panel-refresh"><span class="fa fa-refresh"></span></a></li>
                        <li class="dropdown">
                            <a href="javascript:void(0)" class="dropdown-toggle" data-toggle="dropdown"><span class="fa fa-cog"></span></a>
                            <ul class="dropdown-menu">
                                <li><a href="javascript:void(0)" class="panel-collapse"><span class="fa fa-angle-down"></span> Collapse</a></li>
                                <li><a href="javascript:void(0)" class="panel-remove"><span class="fa fa-times"></span> Remove</a></li>
                            </ul>
                        </li>
                    </ul>
                </div>
                <div class="panel-body panel-body-table">

                    <div class="table-responsive">
                        <table class="table table-bordered table-striped">
                            <thead>
                            <tr>
                                <th>{{'地图名称' | dyLanguage}}</th>
                                <th>{{'课程名称' | dyLanguage}}</th>
                                <th>{{'内容名称' | dyLanguage}}</th>

                                <th>{{'(本月)点击次数' | dyLanguage}}</th>
                                <th>{{'(本月)完成次数' | dyLanguage}}</th>
                                <th>{{'(本月)完成人数' | dyLanguage}}</th>

                                <th>{{'总点击次数' | dyLanguage}}</th>
                                <th>{{'总完成次数' | dyLanguage}}</th>
                                <th>{{'总完成人数' | dyLanguage}}</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr ng-repeat="record in dashboard.exerciseInfos" title="{{record.learningMapName}}">
                                <td><strong>{{record.learningMapName | cmCut:false:10:' ...'}}</strong></td>
                                <td><strong>{{record.learningMapCourseName | cmCut:false:10:' ...'}}</strong></td>
                                <td><strong>{{record.learningMapExerciseName | cmCut:false:10:' ...'}}</strong></td>
                                <td><strong>{{record.pvTotalAlone}}</strong></td>
                                <td><strong>{{record.pvFinishTotalAlone}}</strong></td>
                                <td><strong>{{record.finishTotalAlone}}</strong></td>
                                <td><strong>{{record.pvTotal}}</strong></td>
                                <td><strong>{{record.pvFinishTotal}}</strong></td>
                                <td><strong>{{record.finishTotal}}</strong></td>
                            </tr>
                            </tbody>
                        </table>
                    </div>

                </div>
            </div>
            <!-- END PROJECTS BLOCK -->

        </div>
        <!-- （本月）最受欢迎的内容排行 -------------------------------------------------------------------------------------------- -->


    </div>

    <!-- START DASHBOARD CHART -->
    <!--<div class="chart-holder" id="dashboard-area-1" style="height: 200px;"></div>-->
    <!--<div class="block-full-width">-->

    <!--</div>-->
    <!-- END DASHBOARD CHART -->

</div>
<!-- END PAGE CONTENT WRAPPER -->
